<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <%- include ./default.html%>
    <link href="/public/css/login.css" rel="stylesheet" type="text/css"/>
    <link href="/public/css/animate/animate.min.css" rel="stylesheet" type="text/css"/>
    <link href="/public/css/api-animation.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <header class="api-header">
        <div class="api-w1024">
            <a href="/" class="ah-logo">API开发指南</a>
        </div>
    </header>
    <div class="api-logo-bg">
        <div class="alb-box clearfix">
            <form id="loginForm" onsubmit="return false;" ref="loginForm">
                <h3>后台管理系统</h3>
                <div class="alb-group">
                    <el-input placeholder="请输入账号" name="username" v-model="user.username">
                        <template slot="prepend"><i class="fa fa-user-o"></i></template>
                    </el-input>
                </div>
                <div class="alb-group">
                    <el-input placeholder="请输入密码" type="password" name="password" v-model="user.password">
                        <template slot="prepend"><i class="fa fa-unlock-alt"></i></template>
                    </el-input>
                </div>
                <input class="alb-btn" type="submit" id="loginBtn" value="登录" @click="loginHandler" />
            </form>
        </div>
    </div>
    <footer class="api-footer">
        <p class="api-w1024">胜意前端开发组开发</p>
    </footer>
    <div class="bubble-box">
    <div class="bubble bubble1"></div>
    <div class="bubble bubble2"></div>
    <div class="bubble bubble3"></div>
    <div class="bubble bubble4"></div>
    <div class="bubble bubble5"></div>
    <div class="bubble bubble6"></div>
    <div class="bubble bubble7"></div>
    <div class="bubble bubble8"></div>
    <div class="bubble bubble9"></div>
    <div class="bubble bubble10"></div>
    <div class="bubble bubble11"></div>
    <div class="bubble bubble12"></div>
    <div class="bubble bubble13"></div>
    <div class="bubble bubble14"></div>
    <div class="bubble bubble15"></div>
    <div class="bubble bubble16"></div>
    <div class="bubble bubble17"></div>
    <div class="bubble bubble18"></div>
    <div class="bubble bubble19"></div>
    <div class="bubble bubble20"></div>
        <div class="bubble bubble21"></div>
        <div class="bubble bubble22"></div>
        <div class="bubble bubble23"></div>
        <div class="bubble bubble24"></div>
        <div class="bubble bubble25"></div>
        <div class="bubble bubble26"></div>
        <div class="bubble bubble27"></div>
        <div class="bubble bubble28"></div>
        <div class="bubble bubble29"></div>
        <div class="bubble bubble30"></div>
    <div class="jellyfish jellyfish1">
        <div class="jellyfish_head"></div>
        <div class="jellyfish_tail">
            <div class="jellyfish_tail_in"></div>
        </div>
    </div>
    </div>
    <script>
    var app1 = new Vue({
        el:"#loginForm",
        data:{
            user:{
                username:"",
                password:""
            }
        },
        methods:{
            loginHandler:function(){
                var user = this.$data.user;
                if(!user.username){
                    eleUtil.message("请输入用户名");
                    this.animationTip("username");
                }else if(!user.password){
                    eleUtil.message("请输入密码");
                    this.animationTip("password");
                }else{
                    var _this = this;
                    eleUtil.loading("正在登陆，请稍后...");
                    $.ajax({
                        type:"post",
                        url:"/api/login",
                        data:user,
                        success:function(result){
                        	eleUtil.closeLoading();
                            if(result.status === "success"){
                                location.href = result.message;
                            }else{
                                eleUtil.message(result.message);
                                var code = result.statusCode;
                                if(code === "10002"){
                                    _this.animationTip("username");
                                }else{
                                    _this.animationTip("password");
                                }
                            }
                        },
                        error:function(a,b,c){
                        	eleUtil.closeLoading();
                        }
                    })
                }
            },
            animationTip:function(field){
                $(this.$refs.loginForm[field]).parent().css({
                    animationName:'shake',
                    animationDuration:'1s'
                });
            }
        }
    });
    $(".el-input-group").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
        $(this).css('animationName','none');
    });
</script>
</body>
</html>
